<template>
  <el-container style="height: 100%">
    <el-header height="70px" style="padding: 0">
      <Header></Header>
    </el-header>
    <el-container style="height: 100%">
      <el-aside style="width:12%;height:100%">
        <Aside></Aside>
      </el-aside>
      <el-main style="width:88%;height:100%;padding: 60px 15px 33px 15px;box-sizing: border-box;">
        <div class="tags"><Tag></Tag></div>
        <div class="main"><router-view></router-view></div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import Header from '../components/header/Header'
  import Aside from '../components/aside/Aside'
  import Tag from '../components/tag/Tag'
  import {useStore} from 'vuex'
  export default {
    name:'Index',
    components:{Header,Aside,Tag},
    setup(){
      const store=useStore()
      return{
        store
      }
    }
  }
</script>

<style scoped>
  .tags{
    width: 100%;
    height: 45px;
    margin: -50px 0 0;
    /*background-color: cornsilk;*/
    --el-border-color-light: #909390;
  }
  .main{
    width: 100%;
    height: 100%;
    /*background-color: #909390;*/
    background-color: #ffffff;
    /*display: flex;*/
    position: relative;
  }
</style>